<template>
  <section id="main">

    <header id="header">
      <div class="container">
        <div id="logo" class="fl">
          <img :src="logo"/>
          <h3>酷羽汇</h3>
        </div>
        <!--
        <ul id="nav">
          <li v-for="item in navs" :class="{active: item.id==selected}" @click="selectNav($event)">
            <router-link :id="item.id" :to="item.url">{{ item.name }}</router-link>
          </li>
        </ul>
        -->
      </div>
    </header>

    <router-view/>

    <footer id="footer">
      <div class="container">
        <div id="interact">
          <ul>
            <li v-for="item in interact">
              <a :href="item.href">{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <!--
        <div id="siteInfo">
          <div>
            Copyright © 2006-2017 clantrip.com All Rights Reversed. 中岚签证 京ICP备16015317号
          </div>
        </div>
        -->
      </div>
    </footer>

  </section>
</template>

<script>
  import * as logo from '@/assets/img/logo.png'

  export default {
    name: 'Header',
    components: {},
    data () {
      return {
        selected: location.hash.split('/')[1],
        navs: [
          {id: 'player', name: '球员', url: '/player'},
          {id: 'league', name: '联赛', url: '/league'},
          {id: 'match', name: '比赛', url: '/match'}
        ],
        interact: [
          /*
           { name: '关于网站', href: '#' },
           { name: '联系方式', href: '#' },
           { name: '版权声明', href: '#' },
           { name: '问题反馈', href: '#' },
           { name: '广告服务', href: '#' },
           */
           { name: '联系方式：632561971@qq.com', href: '#' },
           { name: '版权声明：本站所有资源来源于网络，有权益冲突请邮箱联系', href: '#' },
        ], 
        logo: logo
      }
    },
    computed: {
      
    },
    methods: {
      selectNav(evt){
        debugger;
        if($(evt.currentTarget).hasClass('active')){ return; }
        $(evt.currentTarget).addClass('active').siblings().removeClass('active');
        this.selected = evt.target.getAttribute('id');
      }
    },
    updated(){
      debugger;
      
    }
  }
</script>

<style lang="scss" scoped>
@import '../../assets/css/variables.scss';

/*********************************** header *************************************/
  #header{
    width: 100%;
    height: 50px;
    background-color: $bg-color;
    border-bottom: 1px solid #a1a1a1;
    -webkit-box-shadow: 0px 2px 5px #a1a1a1;
    box-shadow: 0px 2px 5px #a1a1a1;
  }
  #logo > img{
    width: 30px;
    height: 30px;
    margin-top: -10px;
    margin-right: 5px;
  }
  #logo > h3{
    margin: 0;
    line-height: 50px;
    display: inline-block;
    font-weight: bold;
    color: $hl-color;
  }
  #nav{
    list-style: none;
  }
  #nav li{
    float: right;
    margin-right: 15px;
    line-height: 50px;
    color: #1d9af9;
  }
  #nav li:first-child{
    margin-right: 0;
  }
  #nav li a{
    color: #1d9af9;
  }
  #nav li:hover a, #nav li.active a{
    color: #f3771e;
  }
/*********************************** header *************************************/

/*********************************** main *************************************/
  #main{
    height: 100%;
  }
/*********************************** main *************************************/

/*********************************** footer *************************************/
  #footer{
    padding-top: 15px;
    padding-bottom: 30px;
    background: #666;
    text-align: center;
  }
  #footer > div > div{
    padding-top: 15px;
  }
  
  #interact, #siteInfo{
    padding: 0 15px;
  }
  #interact > ul > li{
    display: inline-block;
    border-right: 1px solid #c8c8c8;
    padding: 0 10px;
  }
  #interact > ul > li:last-child{
    border-right: 0;
  }
  #interact > ul > li > a{
    color: #e1e1e1;
  }
  #siteInfo{
    color: #e1e1e1;
  }
/*********************************** footer *************************************/
</style>
